<template>
	<view class="bg-gray" style="height: 100vh;">
		<div class="page-header" style="z-index: 1;">
			<div class="title-header">
				<div class="-goback" @click="goHome()">&nbsp;</div>
				<div class="-title">{{mpTitle}}</div>
			</div>
		</div>

		<div class="-body">
			<div class="-page-block">
				<div class="title">修改个人信息</div>
				<div class="" style="margin:15px 0;">
					<div style="margin:30px;">

						<div v-if="userData.avatar || userData.avatar==''" class="userAvatar" @tap="getImageAndUpload"
							:style="'background-image:url(\''+userData.avatar+'\');'"></div>

						<div v-if="userData.nickname || userData.nickname==''" class="d-flex a-center userNickname">
							<div style="font-size: 1rem;">昵称：</div>
							<div>
								<input style="font-size: 1rem;font-weight: normal;" v-model="userData.nickname"
									class="uni-input" placeholder="请输入昵称"></input>
							</div>
						</div>


						<!-- 提交按钮 -->
						<view class="text-center -p-bottom">
							<div class="btn" @click="saveData">提交修改</div>
						</view>
					</div>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
	import com from '../common/index.js'
	export default {
		data() {
			return {
				userData: {},
				mpTitle: com.mpTitle
			}
		},
		onLoad() {
			this.getUserData()
		},
		methods: {
			getUserData() {
				const that = this
				com.poster('/miniapi/member/info', {}, 'get', (e) => {
					if (e.code === 200) {
						that.userData = e.data
					} else {
						uni.showToast({
							title: "获取用户失败",
							icon: 'error',
						})
						setTimeout(() => {
							com.go('userhome')
						}, 2000)
					}
					console.log(e)
				})
			},
			goHome() {
				// uni.navigateTo({
				// 	url: "/pages/homepage"
				// })
				uni.navigateBack()
			},
			// 裁剪和上传图片
			async getImageAndUpload() {
				const that = this
				try {
					const chooseImageRes = await uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera']
					});

					const tempFilePaths = chooseImageRes.tempFilePaths;
					if (tempFilePaths.length === 0) {
						throw new Error('没有选择图片');
					}

					const imgPath = tempFilePaths[0];

					const cropImageRes = await wx.cropImage({
						src: imgPath, // 图片路径
						cropScale: '1:1', // 裁剪比例   微信官方提供了多种裁剪比例以供选择
						success: e => {
							uni.showLoading({
								title: "上传中"
							})
							console.log(e)
							const cropImgPath = e.tempFilePath
							wx.uploadFile({
								url: com.serviceURL +
									'/miniapi/tool/upload-file', // 你的服务器接口地址
								filePath: cropImgPath,
								name: 'file',
								header: {
									'Content-Type': 'multipart/form-data',
									'authorization': 'Bearer ' + com.getToken()
								},
								formData: {
									file: cropImgPath,
									name: 'file',
								},
								success: res => {
									uni.hideLoading({
										noConflict: true
									})
									let r = JSON.parse(res.data);
									that.userData.avatar = r.data.file
									// uni.showToast({
									// 	title: "上传成功",
									// 	icon: "success"
									// })
								}
							})
						}
					});

				} catch (error) {
					// 错误处理
					console.error(error);
					throw error;
				}
			},
			// 保存修改
			saveData() {
				const that = this
				if (this.userData.nickname === '' || this.userData.avatar === '') {
					uni.showToast({
						title: "请填写完整",
						icon: 'fail'
					})
					return
				}

				com.poster('/miniapi/member/info-icon', {
					nickname: that.userData.nickname,
					file: that.userData.avatar
				}, 'POST', (e) => {
					if (e.code !== 200) {
						uni.showToast({
							title: e.msg,
							icon: 'error',
						})
						setTimeout(() => {
							com.go('userhome')
						}, 2000)
						return
					}
					let b4 = com.getUserInfo()
					let aft = {
						...b4,
						...{
							avatar: that.userData.avatar,
							nickName: that.userData.nickname,
							phone: that.userData.phone
						}
					}
					setTimeout(() => {
						com.setUserInfo(aft)
						console.log('aft:', aft)
						uni.showToast({
							title: "操作成功",
							icon: 'success',
							duration: 2000,
							complete() {
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							}
						})
					}, 500)

				}, (e) => {
					console.log(e)
				})
			}
		}
	}
</script>

<style>
	.userAvatar {
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		width: 150px;
		height: 150px;
		margin: 50px auto 10px auto;
		border-radius: 1.3ex;
	}

	.userAvatar:before {
		content: "点击修改";
		display: block;
		text-align: center;
		font-size: small;
		padding-top: calc(100% - 30px);
		color: white;
		text-shadow: 0 0 1px black;
	}

	.userNickname {
		padding: 10px;
		background-color: #f7f7f7;
		margin-top: 30px;
		border-radius: 1.3ex;
		color: #444;
	}

	.-p-bottom {
		position: fixed;
		bottom: 5vh;
		width: 100%;
		left: 0;
	}

	.btn {
		background: #4175fe;
		color: white;
		text-align: center;
		padding: 10px 20px;
		display: inline-block;
		border-radius: 3ex;
		width: 300px;
		margin: 0 auto;
	}

	.-body {
		/* height: calc(100vh - 150px); */
		margin-top: 140px;
		position: absolute;
		width: 100%;
		background: transparent;
		z-index: 10;
	}
</style>